import { createStore } from 'vuex'

const store= createStore({
  state: {
    //每次初始化就从localStorage获取cartArray：
    cartArray:JSON.parse(window.localStorage.getItem("cartArray")||"null")||[],
  },
  mutations: {
    /**
     * 
     * @param state 
     *
     * @param val 传进来的值
     * 1.cartArray中先找出对应元素
     * 2.有cartCount++
     * 3.没有cartArray.push
     */
    addCart(state:any,val:any){
 
      //找到满足条件的第一个对象
    const item:any =  state.cartArray.find(e=>e.title===val.title);
      //找到直接加1；
      if(item){
        item.cartCount++;
      }else{
        state.cartArray.push({cartCount:1,title:val.title,img:val.img});
      }
    },

    /**
     * 
     * @param state 
     * @param val 购物车要操作的商品
     * 思路：在state.cartArray找到val，
     * 对其数量进行操作
     */
    cartCountPlus(state:any,val:any){
      const item:any =  state.cartArray.find(e=>e.title===val.title);
      item.cartCount++;
    },
    /**
     * 
     * @param state 
     * @param val 购物车要操作的商品
     * 思路：在state.cartArray找到val，
     * 对其数量进行操作
     * 如果此时数量为1，则删除这个商品
     */
    cartCountMinus(state:any,[val,index]){
      const item:any =  state.cartArray.find(e=>e.title===val.title);
      if(val.cartCount===1){
        //移除item
        state.cartArray.splice(index,1);
      }else{
        item.cartCount-=1;
      }
      console.log(state.cartArray,index);
    },
    clearCart(state){
      state.cartArray=[];
    }
  },
  getters:{
    /**
     * 
     * @param state 
     * @returns 所有商品的数量
     */
      getCartNum(state){
        let num:string|number=0;
        state.cartArray.forEach(e=>{
          num+=e.cartCount;
        })
        if(num==0){
          num='';
        }
        return num
      }
  },
  actions: {
  },
  modules: {
  }
})


store.subscribe((mutation, state) => {

  //每次调用完mutation就将数据进行数据持久化，
  window.localStorage.setItem("cartArray",JSON.stringify(state.cartArray) );
  // called after every mutation.
  // The mutation comes in the format of `{ type, payload }`.
})
export default  store
